import { Tabs } from 'nextra/components'
import { Badge } from '/components/badge'

# Document Configuration

Used to configure the display and behavior of the Umo Editor document area and document name.

## Default Configuration

```js
{
  document: {
    id: '',
    title: '',
    content: '',
    placeholder: {
      en_US: 'Please enter the document content...',
      zh_CN: '请输入文档内容...',
    },
    enableSpellcheck: true,
    enableMarkdown: true,
    enableBubbleMenu: true,
    enableBlockMenu: true,
    readOnly: false,
    autofocus: true,
    characterLimit: 0,
    typographyRules: {},
    // https://prosemirror.net/docs/ref/#view.EditorProps
    editorProps: {},
    // https://prosemirror.net/docs/ref/#model.ParseOptions
    parseOptions: {
      preserveWhitespace: 'full',
    },
    autoSave: {
      enabled: true,
      interval: 300000,
    },
  },
}
```

## Configuration Options

### document.id

**Description**: Document ID. In the collaborative editing scenario of Umo Editor Next version, document ID is required and used to uniquely identify a document.

**Type**: `String`

**Default Value**: `''`

### document.title

**Description**: Document title, used for exported file names, etc. You can dynamically set or modify the document title using the [`setDocument`](../methods#setdocument).

**Type**: `String`

**Default Value**: `''`

### document.content

**Description**: Initial document content, which can be modified by the user. You can dynamically set or modify the document content using the [`setContent`](../methods#setcontent).

**Type**: `String`

**Default Value**: `''`

### document.placeholder

**Description**: Placeholder when the document content is empty.

**Type**: `String` or `Object`

- `zh_CN`: Simplified Chinese
- `en_US`: English

### document.enableSpellcheck

**Description**: Whether to enable browser spellcheck. Users can manually disable it when enabled. You can dynamically set whether to enable browser spellcheck using the [`setDocument`](../methods#setdocument).

**Type**: `Boolean`

**Default Value**: `true`

### document.enableMarkdown

**Description**: Whether to enable Markdown syntax. Users can manually disable it when enabled. You can dynamically set whether to enable Markdown syntax using the [`setDocument`](../methods#setdocument).

**Type**: `Boolean`

**Default Value**: `true`

### document.enableBubbleMenu

**Description**: Whether to enable the bubble menu. You can dynamically set whether to display the bubble menu using the [`setDocument`](../methods#setdocument).

**Type**: `Boolean`

**Default Value**: `true`

### document.enableBlockMenu

**Description**: Whether to enable the block menu. You can dynamically set whether to display the block menu using the [`setDocument`](../methods#setdocument). When the document content is too large, the block menu may have performance issues, see [#275](https://github.com/umodoc/editor/issues/275), you can consider disabling the block menu. <Badge theme="success">Added in v1.3.0</Badge>

**Type**: `Boolean`

**Default Value**: `true`

### document.readOnly

**Description**: Whether the document is read-only. When `true`, users cannot edit the current document. You can set whether the document is read-only using the [`setReadOnly`](../methods#setreadonly).

**Type**: `Boolean`

**Default Value**: `false`

### document.autofocus

**Description**: Whether the document automatically gains cursor focus. You can set whether the document gains cursor focus using the [`focus`](../methods#focus).

**Type**: `Boolean`

**Default Value**: `true`

### document.characterLimit

**Description**: Document character limit. When `0`, there is no limit.

**Type**: `Number`

**Default Value**: `0`

### document.typographyRules

**Description**: Document typography rules.

**Type**: `Object`

**Default Value**: `{}`

**Options**:

| Name | Description | Enabled by Default |
| :--- | :---: | :---: |
| emDash | Converts double dashes `--` to em dashes `—`. | ✅ Enabled |
| ellipsis | Converts three dots `...` to ellipsis `…`. | ✅ Enabled |
| openDoubleQuote | “Smart” left double quotes. | ✅ Enabled |
| closeDoubleQuote | “Smart” right double quotes. | ✅ Enabled |
| openSingleQuote | ‘Smart’ left single quotes. | ✅ Enabled |
| closeSingleQuote | ‘Smart’ right single quotes. | ✅ Enabled |
| leftArrow | Converts `<-` to left arrow `←`. | ✅ Enabled |
| rightArrow | Converts `->` to right arrow `→`. | ✅ Enabled |
| copyright | Converts `(c)` to copyright symbol `©`. | ✅ Enabled |
| registeredTrademark | Converts `(r)` to registered trademark symbol `®`. | ✅ Enabled |
| trademark | Converts `(tm)` to trademark symbol `™`. | ✅ Enabled |
| servicemark | Converts `(sm)` to service mark symbol `℠`. | ✅ Enabled |
| oneHalf | Converts `1/2` to one-half `½`. | ✅ Enabled |
| oneQuarter | Converts `1/4` to one-quarter `¼`. | ✅ Enabled |
| threeQuarters | Converts `3/4` to three-quarters `¾`. | ✅ Enabled |
| plusMinus | Converts `+/-` to plus-minus sign `±`. | ✅ Enabled |
| notEqual | Converts `!=` to not equal sign `≠`. | ✅ Enabled |
| laquo | Converts `<<` to left guillemet `«`. | ✅ Enabled |
| raquo | Converts `>>` to right guillemet `»`. | ✅ Enabled |
| multiplication | Converts `2 * 3` or `2x3` to multiplication sign `2×3`. | ✅ Enabled |
| superscriptTwo | Converts `^2` to superscript two `²`. | ✅ Enabled |
| superscriptThree | Converts `^3` to superscript three `³`. | ✅ Enabled |

To disable an option, set it to `false`, for example:

<Tabs items={['Global Configuration', 'SFC Configuration']}>
<Tabs.Tab>
```js
{
  document:{
    typographyRules: {
      emDash: false
    }
  }
}
```
</Tabs.Tab>
<Tabs.Tab>
```vue
<template>
  <umo-editor 
    :document="{
      typographyRules: {
        emDash: false
      }
    }" 
  />
</template>
 
<script setup>
import { UmoEditor } from '@umoteam/editor'
</script>
```
</Tabs.Tab>
</Tabs>

### document.autoSave

**Description**: Document auto-save configuration. You can dynamically set or modify this configuration using the [`setDocument`](/methods#setdocument). <Badge theme="success">Added in v1.4.0</Badge>

**Type**: `Object`

**Options**:
- `enabled`: Boolean, whether to enable auto-save. Default value is `true`.
- `interval`: Number, auto-save interval in milliseconds. Default value is `300000` (5 minutes).

### document.editorProps

**Description**: For advanced scenarios, you can pass some configurations to [ProseMirror](https://prosemirror.net/docs/ref/#view.EditorProps) via `document.editorProps`. You can use it to override various editor events or change editor DOM element attributes. More information: https://prosemirror.net/docs/ref/#view.EditorProps . <Badge theme="success">Added in v2.3.0</Badge>

**Example**:
```js
{
  editorProps: {
    attributes: {
      class: 'prose prose-sm sm:prose lg:prose-lg xl:prose-2xl mx-auto focus:outline-none',
    },
    transformPastedText(text) {
      return text.toUpperCase()
    },
  },
}
```

**Type**: `Object`

**Default Value**: `{}`

### document.parseOptions

**Description**: Defines [ProseMirror](https://prosemirror.net/docs/ref/#view.EditorProps) parsing behavior. When you need to parse a DOM node or a raw text string into ProseMirror's document model, you can use `document.parseOptions` to customize the parsing process. More information: https://prosemirror.net/docs/ref/#model.ParseOptions . <Badge theme="success">Added in v2.3.0</Badge>

**Type**: `Object`

**Default Value**: `{ preserveWhitespace: 'full' }`
